Customisation via System Tags

Demo of customising TiddlyWiki:

1. Create a tiddler called MyMenu
2. Tag it $:/tags/SideBar and give it the text of some menu items
3. Add a caption field
4. Add a list-before field
5. Same for adding a tab to $:/ControlPanel

See http://tiddlywiki.com/#SystemTags

Example of a deeply customised "edition": http://tw5.scholars.tiddlyspot.com

Thank You

http://tiddlywiki.com/

https://twitter.com/Jermolene

https://twitter.com/TiddlyWiki

https://github.com/Jermolene/TiddlyWiki5

Everything is a Tiddler

It's tiddlers, all the way down. The tiddler model is used for:

• User text and data
• JavaScript CommonJS-compatible modules
• User interface state
• Configuration eg
  • Settings $:/config/Navigation/UpdateAddressBar
  • Editor type mappings $:/config/EditorTypeMappings/image/gif
• Plugins:
  • Core code
  • Themes
  • Languages
  • Plain plugins
• Test specifications

The boot kernel brings up enough of the infrastructure to load plugins. The core code itself is a plugin.

Everything is Wikification

The rendering pipeline does everything:

• On the server:
  • Generate the standalone index.html file
    • (Actually rendering a single tiddler to the fakedom, and then serialising it)
  • Generate static representations of individual tiddlers
    • For example, [[ReadMe on GitHub|https://github.com/Jermolene/TiddlyWiki5/blob/master/readme.md]
• In the browser for:
  • Displaying main page
  • Generating page title
  • Generating and dynamically updating stylesheets
  • Saving changes

Features

• Works on pretty much any HTML5 browser
• Built-in encryption
• Multi-language support for the user interface and your content
• (Responsive) themes
• Colour palettes
• Plugins for popular JS libraries:
  • CodeMirror
  • D3.js
  • Highlight.js
  • MarkDown
• Pluggable navigation visualisations

Introduction

http://tiddlywiki.com/editions/introduction

(which is itself a TiddlyWiki, of course).

Running TiddlyWiki Under Node.js

Creating a single file wiki

tiddlywiki mywiki --init tw5.com
tiddlywiki mywiki --rendertiddler $:/core/save/all index.html text/plain

See the template for the HTML, and for some of the CSS.

Serving a wiki over HTTP

tiddlywiki my2wiki --init server
tiddlywiki my2wiki --server

TiddlyWiki5 provides a TiddlyWeb-compatible API

Other options

PouchDB - from Jon Udell's Thali project - https://gist.github.com/judell/9744381

Demo 4: Node.js

Installation

sudo npm install -g tiddlywiki

Import single file wiki into a wiki folder

tiddlywiki MyWiki --init server
tiddlywiki MyWiki --load ~/path/to/wiki.html

Client Server Mode

tiddlywiki MyWiki --server

Static Site Generation

tiddlywiki MyWiki --rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain

10+ years of TiddlyWiki

I've learned:

• JS was wildly misunderstood. It's still widely misunderstood
• Browsers were broken; now they're pretty consistent (except certain areas like drag and drop)
• My privilege is to be in a position to engage with my users to understand their needs. I should be paying people in the community for what I learn about making TiddlyWiki better
• Open source is the natural state of human software production
  • It recognises that software is not a branch of engineering
  • It teaches us how to make collaboration be a by-product of performing the work. It allows us to present the largest possible surface area for prospective collaborators.
• Being a software designer isn't enough. We need to design business models that are healthy for us, and in the best interests of our users. Something as personal and fundamental as my intellectual apparatus shouldn't be under the control of someone else

TiddlyWiki Rendering Pipeline

Like Angular and Ractive. Not string based; always uses a DOM and selective updating.

How TiddlyWiki Saves Changes

The awkward but HTML5-compliant way:

var link = document.createElement("a");
link.setAttribute("target","_blank");
link.setAttribute("href","data:text/html," + encodeURIComponent(text));
link.setAttribute("download",filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Full code on GitHub

Serverlessness FTW!

Individual deserve the freedom to have private spaces where their thoughts are their own, and where they control their own environment, making their own trade-offs.

How can we make an independent web? It's fundamentally asymmetrical; only brave homesteaders run their own servers, most people are happy to rent space from a central service.

For civilians, the barriers to running your own server are huge: it's a new cost for most people, and the benefit is intangible. It's one of those situations where the penalties for screwing up can be disproportionately unforgiving: eg, failing to keep backups or to keep security software up to date.

TiddlyWiki Server Synchronisation

The same syncer module is used in the browser and the server.

Shout-outs

Several other projects share goals with TiddlyWiki:

• IndieWeb - http://indiewebcamp.com/
• Smallest Federated Wiki – http://fed.wiki.org/
• Offline First! – http://offlinefirst.org/
• noBackend – http://nobackend.org/
• Fargo – http://fargo.io/
• Substance.io Composer – http://substance.io/composer/
• Hoodie – http://hood.ie/

Demo of Single File Edition

You're already in a demo of TiddlyWiki, but here's a quick run through of using it:

1. Visit http://tiddlywiki.com/empty.html in Chrome
2. Add and edit some tiddlers
3. Explore tags, search, sidebars
4. Drag an image from the file system
5. Copy and paste part of an HTML page
6. Save using Chrome
7. Inspect source
8. Reload in Firefox, use TiddlyFox
9. Enable encryption, resave, check source

Demo

• Visit http://tiddlywiki.com/empty.html in Google Chrome
• Explore: Navigation, Editing, Tags, Fields, Sidebar, Search
• Drag image and use Control Panel to set as page background
• Drag TaskManagementDemo from http://tiddlywiki.com
• All the changes so far are confined to the browser...
• Now we'll save locally using the "HTML5 fallback saver"

<div class="tc-table-of-contents">

<<toc-selective-expandable 'TableOfContents'>>

</div>

Static Site Generation

tiddlywiki ./myWiki \
--rendertiddler $:/core/templates/static.template.html static.html text/plain \
--rendertiddler $:/core/templates/alltiddlers.template.html alltiddlers.html text/plain \
--rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain \
--rendertiddler $:/core/templates/static.template.css static/static.css text/plain

static.html

alltiddlers.html

static/AllTiddlers.html

Task Management Demo

<$list filter="[!has[draft.of]tag[task]!tag[done]sort[created]]">

<$checkbox tag="done"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox>

</$list>

See http://tiddlywiki.com/#TaskManagementExample

Duality of TiddlyWiki

Tiddly === Everything is a tiddler

A tiddler is defined as the smallest semantic unit of information.

It is a structure optimised for reuse through aggregation and composition.

Wiki === Everything is wikification

Wikification is the process of converting WikiText into HTML.

It makes linking (and other hypertext operations) become part of the punctuation of writing.

Saving with TiddlyDesktop

TiddlyDesktop is a custom browser with extensions to support working with TiddlyWiki. Based on nw.js (formerly known as node-webkit).

Demo 3: TiddlyDesktop

• Run TiddlyDesktop, open demo wiki
• Show wikilist, saving, control panel, help
• Open backstage wiki, explore

Saving with TiddlyFox

Allows changes to be saved directly to the file system in Firefox (including Firefox for Android).

https://addons.mozilla.org/en-Us/firefox/addon/tiddlyfox/

Demo 2: TiddlyFox, Hierarchies and Customisation

• Open demo wiki in Firefox with TiddlyFox installed
• Show the seamless saving
• Show source, enable encryption, resave, check source
• Show table of contents:
  • Create new tiddler tagged $:/tags/SideBar containing:

  <div class="tc-table-of-contents">
  
  <<toc-selective-expandable 'TableOfContents'>>
  
  </div>

  • Show adding new entries
• Show other system tags

Saving on iPad/iPhone

Download TWEdit

User Interface State

Show how sidebar state is held in $:/state/sidebar:

$tw.wiki.addTiddler(new $tw.Tiddler({title: "$:/state/sidebar",text: "yes"}))

Basic primitives for user interfaces:

• <$transclude> widget to transclude another tiddler
• <$reveal> widget to selectively show or hide content according to a state tiddler
• <$button> widget set or toggle a state tiddler
• <$list> widget to repeat a template for each of several tiddlers

Using TiddlyWiki as a Library

/*
A sample node.js application that uses TiddlyWiki5 as a library
*/

var $tw = {};

require("../TiddlyWiki5/boot/bootprefix.js").bootprefix($tw)

// Dummy command line arguments telling TW5 not to load a wiki from the filesystem
$tw.boot = $tw.boot || {};
$tw.boot.argv = ["*"];

require("../TiddlyWiki5/boot/boot.js").TiddlyWiki($tw);

// Boot TiddlyWiki
$tw.boot.boot();

// Add some tiddlers
$tw.wiki.addTiddler({
        title: "TiddlerOne",
        text: "Text of tiddler one, incorporating the {{TiddlerTwo}}",
        tags: ["alpha", "beta"]
});
$tw.wiki.addTiddler({
        title: "TiddlerTwo",
        text: "Text of tiddler two"
});

// Render a tiddler as HTML
var html = $tw.wiki.renderTiddler("text/html","TiddlerOne");
console.log(html);

See: https://github.com/Jermolene/TiddlyWiki5DemoApp

What is TiddlyWiki?

TiddlyWiki is a universal JavaScript wiki that can run entirely in the browser, or under Node.js. Internally, it is a pipeline for efficiently parsing and rendering a dialect of wikitext that is rich enough to express the entire user interface.

It's also a Quine.